<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="form.roleName"></el-input>
      </el-form-item>
      <el-form-item label="角色说明" prop="remark">
        <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 250px; overflow-y: hidden"
            v-model="form.remark"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
          />
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import { InsertRole } from "../../api/role.js";

import { Editor, Toolbar } from "@wangeditor/editor-for-vue"

export default {
  components: { Editor, Toolbar },
  data() {
    return {
      //富文本编辑器
      editor: null,
      html: "<p>hello</p>",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
      form: {
        roleName: "",
        remark: "",
      },
      rules: {
        roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" },],
        remark: [{ required: true, message: "请填写角色说明", trigger: "blur" }],
      },
    };
  },

  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
    }, 1500);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },

  methods: {
    //添加角色
    AddRoleInfo(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            InsertRole(this.form).then((res) => {
              if (res.data.result == 200) {
                    this.$message({ type: "success", message: res.data.message,});
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
  },
  created() {},
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
</style>
